import React, { useId, useState } from 'react'
import styles from './index.module.less'

const Index = (props) => {
  const { disabled, defaultChecked = false, activeColor = 'var(--theme-color)', unActiveColor = '#c0c0c0' } = props
  const [checked, setChecked] = useState(defaultChecked)
  const switchId = useId()

  const change = () => {
    const currentValue = !checked
    setChecked(currentValue)
    props?.onChange?.(currentValue)
  }
  return (
    <>
      <input
        disabled={disabled}
        type="checkbox"
        id={switchId}
        className={styles.checks}
        onChange={change}
        checked={checked}
      />
      <label
        htmlFor={switchId}
        className={styles.switch}
        style={{ backgroundColor: checked ? activeColor : unActiveColor }}
      ></label>
    </>
  )
}

const Switch = React.memo(Index)

export default Switch
